<template>
	<view class="h-full pos-r">
		<view class="dflex-c padding-lr bg-base">
			<view class="dflex margin-tb-xl">
				<use-ring class="margin-right-xl" ref="ring" :value="userInfo.sysBalance" :max="userInfo.sysBalance"
					@success="ringSuccess">
					<view class="price ft-white tac">{{userInfo.sysBalance}}</view>
					<view class="fs-xxs tac">平台余额</view>
				</use-ring>

				<view class="tac margin-left-xl">
					<text class="price ft-white fs-xxxl">{{userInfo.sysBalance}}</text>
					<view class="cashout ft-base" @click="cashoutPopup = true">
						转户
					</view>
				</view>
			</view>
		</view>
		<view class="bg-main data-area padding-lr-sm padding-top">
			<view class="dflex-c w-full margin-top" >
				<!-- <view @click="cashoutPopup2=true" class="tac border-radius-lg margin-lr-sm padding-tb-sm fwb" style="border: 1px solid #ff6a6c; color: #ff6a6c;width: 50vw;">贡献值转余额</view> -->
				<view @click="cashoutPopup1=true" class="tac border-radius-lg padding-tb-sm fwb" style="border: 1px solid #ff6a6c; color: #ff6a6c;width: 50vw;">转账</view>
			</view>
			<view class="dflex-a w-full padding-top-xl" @click="record">
				<view class="stats dflex-c dflex-flow-c">
					<text class="price fs-xl">{{userInfo.bonusOrders || 0}}</text>
					<view class="ft-main fs-xs">
						累计红包订单总额
					</view>
					<view class="vertical-line"></view>
				</view>
				<view class="stats dflex-c dflex-flow-c" @click="cashoutRecordAudit">
					<text class="price fs-xl">{{(userInfo.bonusTotal / 100).toFixed(2) || 0}}</text>
					<view class="ft-main fs-xs">
						累计红包总额
					</view>

					<view class="vertical-line"></view>
				</view>
				<view class="stats dflex-c dflex-flow-c" @click="cashoutRecordSucceed">
					<text class="price fs-xl">{{(userInfo.bonusLimit / 100).toFixed(2) || 0}}</text>
					<view class="ft-main fs-xs">
						个人红包上限
					</view>
				</view>
			</view>
			<view class="margin-tb-xl padding-top-sm padding-lr">
				<view class="tac dflex-a w-full">
					<view class="border-radius nav" @click="cashoutRecord">
						<view class="dflex-c dflex-flow-c">
							<view class="border-radius item" style="background: #ffbc49;">
								<text class="iconfont iconmingxi"></text>
							</view>
							<view class="">
								<view class="fs-30 fwbd">
									转户申请
								</view>
								<view class="ft-dark fs-xxs">
									转户申请明细
								</view>
							</view>
						</view>
					</view>
					<view class="border-radius nav" @click="faq">
						<view class="dflex-c dflex-flow-c">
							<view class="border-radius item" style="background: #ffab6c;">
								<text class="iconfont iconchangjianwenti-01"></text>
							</view>
							<view class="">
								<view class="fs-30 fwbd">
									常见问题
								</view>
								<view class="ft-dark fs-xxs">
									疑问小帮手
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="border-radius nav" @click="order">
						<view class="dflex-c dflex-flow-c">
							<view class="border-radius item" style="background: #6f96f1;">
								<text class="iconfont iconfenxiaodingdan-01"></text>
							</view>
							<view class="">
								<view class="fs-30 fwbd">
									转户确认
								</view>
								<view class="ft-dark fs-xxs">
									转户确认明细
								</view>
							</view>
						</view>
					</view> -->
				</view>
				<!-- <view class="tac margin-top dflex-a w-full">
					<view class="border-radius nav" @click="fsxMember">
						<view class="dflex-c dflex-flow-c">
							<view class="border-radius item" style="background: #af69e3;">
								<text class="iconfont iconfenxiaohuiyuan-01"></text>
							</view>
							<view class="">
								<view class="fs-30 fwbd">
									转户处理
								</view>
								<view class="ft-dark fs-xxs">
									转户处理明细
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>

		
		<use-popup v-model="cashoutPopup" bgclass=" " mode="center" borderRadius="20">
			<!-- 提现弹出框 -->
			<view class="padding-lr-xl cashout-area">
				<view class="dflex-b ft-dark margin-top-sm fs-xxs">
					<view>转户申请</view>
					<view>转户手续费 5%</view>
				</view>
				<view class="dflex border-radius-sm field">
					<text class="margin-right-xs">￥</text><input type="digit" class="w-full" v-model="withdrawalData.amount" placeholder="输入转户金额" />
				</view>
				<view>转户金额为200的整倍数</view>
				<view class="dflex border-radius-sm field margin-bottom-sm">
					<input  class="w-full" v-model="withdrawalData.accountName" placeholder="输入支付宝名称" />
				</view>
				<view class="dflex border-radius-sm field margin-bottom-sm">
					<input class="w-full" v-model="withdrawalData.accountNumber" placeholder="输入支付宝号码" />
				</view>
				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="cashout">
					申请转户
				</view>
			</view>
		</use-popup>
		
		<use-popup v-model="cashoutPopup2" bgclass=" " mode="center" borderRadius="20">
			<!-- 提现弹出框 -->
			<view class="padding-lr-xl cashout-area">
				<view class="dflex-b ft-dark margin-top-sm fs-xxs">
					<view>贡献值转余额</view>
					<view>转换手续费 5%</view>
				</view>
				<view class="dflex border-radius-sm field">
					<input type="digit" class="w-full" v-model="contributeNumber" placeholder="请输入贡献值数量" />
				</view>
				<view>可兑换贡献值数量:{{userInfo.sysContribute}}枚</view>
				<view>价格:10元/枚</view>
				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="transferContribute">
					立即转换
				</view>
			</view>
		</use-popup>
		<use-popup v-model="cashoutPopup1" bgclass=" " mode="center" borderRadius="20">
			<!-- 提现弹出框 -->
			<view class="padding-lr-xl cashout-area">
				<view class="dflex-b ft-dark margin-top-sm fs-xxs">
					<!-- <view>转账金额</view> -->
					<view>转账手续费 0%，单日限额20000</view>
				</view>
				<view class="dflex border-radius-sm field">
					<text class="margin-right-xs">￥</text><input type="digit" class="w-full" v-model="transfer.number" placeholder="请输入转账金额" />
				</view>
				<view class="margin-top-sm ft-dark fs-xxs">入账账号</view>
				<view class="dflex border-radius-sm field">
					<input class="w-full" v-model="transfer.account" placeholder="请输入进账手机号" />
				</view>
				
				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="transferMoney">
					立即转账
				</view>
			</view>
		</use-popup>
	</view>
</template>

<script>
	import {user_withdrawal} from "../../../js_sdk/apis/user.js"
	import {transfer_money,transfer_contribute} from "../../../js_sdk/apis/pay.js"
	export default {
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo
			},
			isLogin(){
				return this.$store.getters['user/hasLogin']
			}
		},
		data() {
			return {
				data: {},
				member:{},
				transfer:{
					account:"",
					number:"",
				},
				contributeNumber:"",
				cashoutPopup: false,
				// 提现金额
				money: '',
				totalAmount: 0,
				cashoutVal: 0,
				cashoutPopup1:false,
				cashoutPopup2:false,
				posterShow: false,
				posterUrl: '',
				posterQRcode: '',
				posterData: {},
				withdrawalData:{},
			};
		},
		onLoad: function() {
			//this.loadData();
		},
		methods: {
			transferContribute(){
				transfer_contribute({number:this.contributeNumber}).then(res=>{
					this.$api.msg('提交成功');
					this.cashoutPopup2=false;
					this.contributeNumber=""
					setTimeout(()=>{
						this.$store.dispatch('user/GetInfo')
					},1000)
				})
			},
			transferMoney(){
				transfer_money(this.transfer).then(res=>{
					this.$api.msg('提交成功');
					this.cashoutPopup1=false;
					setTimeout(()=>{
						this.$store.dispatch('user/GetInfo')
					},1000)
					this.transfer={
						account:"",
						number:"",
					}
				})
			},
			ringSuccess() {
				// this.$api.msg('ringSuccess');
			},
			// 提现
			cashout() {
				let _this=this
				if(_this.withdrawalData.amount%200==0&&_this.withdrawalData.amount>0){
					if(!_this.withdrawalData.accountName||!_this.withdrawalData.accountNumber){
						_this.$api.msg('请完善信息');
						return
					}
					let {accountName,accountNumber,amount} =_this.withdrawalData
					uni.showModal({
						title: '提示',
						content: '立即转户',
						success: (opt) => {
							if (opt.confirm) {
								user_withdrawal({accountName,accountNumber,amount}).then(res=>{
									console.log(res)
									_this.$api.msg('提交成功');
									_this.cashoutPopup=false;
									//_this.$store.dispatch('user/GetInfo')
								}).fail(()=>{
									_this.cashoutPopup=false;
								})
							}
						}
					});
				}else{
					_this.$api.msg('金额必须是200的整数倍');
				}
			},
			// 分销记录
			record() {
				uni.navigateTo({
					url: `/pages/user/distribution/record`
				})
			},
			// 分销成员
			fsxMember() {
				uni.navigateTo({
					url: "/pagesA/user/distribution/transfer-handle"
				})
			},
			// 待审提现
			cashoutRecordAudit() {
				uni.navigateTo({
					url: `/pages/user/distribution/cashout-record?state=待审核`
				})
			},
			// 已提佣金
			cashoutRecordSucceed() {
				uni.navigateTo({
					url: `/pages/user/distribution/cashout-record?state=已提现`
				})
			},
			// 提现记录
			cashoutRecord() {
				uni.navigateTo({
					url: "/pagesA/user/distribution/transfer-account"
				})
			},
			// 分销订单
			order() {
				uni.navigateTo({
					url: "/pagesA/user/distribution/transfer-confirm"
				})
			},
			// 待结佣金
			pending() {
				uni.navigateTo({
					url: `/pages/user/distribution/pending`
				})
			},
			// 专属海报
			poster() {
				this.posterShow = true;
				this.createPoster();
			},
			// 常见问题
			faq() {
				uni.navigateTo({
					url: `/pages/user/setting/faq?type=分销`
				})
			},
			
			// 创建海报
			createPoster() {
				if (this.posterUrl) {
					this.posterShow = true;
					return;
				}
				uni.showLoading({
					title: '生成海报中'
				});
			
				// #ifdef MP || APP
				// 此处的二维码内容，需自己在小程序端配置普通二维码规则
				this.posterQRcode = `https://usemall.use-cloud.com/wxmp/fxs_${this.member._id}`;
				// #endif
			
				// #ifdef H5
				// 如果为 h5，二维码内容需配置为线上版本产品详情路径
				this.posterQRcode =
					`https://usemall-h5.use-cloud.com/#/pages/tabbar/home?mid=${this.member._id}`;
				// #endif
			},
			// 海报二维码生成成功
			posterQRcodeResult(res) {
				// 获取产品海报数据
				this.posterData = uposter.getFxsData(this.member, res);
				console.log('this.posterData', this.posterData);
			
				this.posterShow = true;
			},
			// 海报生成完成
			posterSuccess(res) {
				this.posterUrl = res;
			
				uni.hideLoading();
			},
			// 保存海报
			posterSave() {
				if (this.posterUrl) {
					uni.showLoading({
						title: '保存中'
					})
			
					uni.saveImageToPhotosAlbum({
						filePath: this.posterUrl,
						success: function() {
							uni.hideLoading();
			
							uni.showToast({
								title: '海报保存成功',
								icon: 'success',
								duration: 2000
							});
						}
					});
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #ff6a6c;
	}

	.data-area {
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		overflow: hidden;
		top: 300rpx;
		height: calc(100% - 298rpx);
		overflow-y: auto;

		.stats {
			width: 33.33%;
			position: relative;
		}

		.nav {
			width: 44%;
			box-shadow: 0 2rpx 30rpx 5rpx #f5f5f5;
			padding: 50rpx 0 30rpx;
		}

		.item {
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin-bottom: 20rpx;

			.iconfont {
				color: #fff;
				font-size: 50rpx;
			}
		}
	}

	.cashout {
		padding: 15rpx 60rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.cashout-area {
		width: 80vw;
		padding: 80rpx;

		.field {
			padding: 20rpx;
			background-color: #f5f5f5;

			input {
				height: 56rpx;
				line-height: 56rpx;
			}
		}
	}
</style>
